<template>
  <!-- <CustomNav title="我的" :isShowBack="false"></CustomNav> -->
  <view class="container">
    <view class="content">
      <!-- 用户 -->
      <view class="user">
        <view class="left">
          <image src="./../../static/default_avatar.png" mode="scaleToFill" />
        </view>
        <view class="right">
          <view class="h1" @click="handleLogin">登录/注册</view>
          <view class="span">Hi，欢迎加入体验更多功能</view>
        </view>
      </view>
      <!-- user数据 -->

      <view class="user-data">
        <view class="row love">
          <view class="top">1</view>
          <view class="bottom">我的喜欢</view>
        </view>
        <view class="row collect">
          <view class="top">8</view>
          <view class="bottom">我的收藏</view>
        </view>
        <view class="row look-history">
          <view class="top">26</view>
          <view class="bottom">观看历史</view>
        </view>
      </view>

      <!-- <view class="data-echarts">
        &#128514;&#128525;&#128526;&#128527;
        <l-echart
          ref="chart"
          @finished="init"
          custom-style="width:400rpx;height:300rpx;"
        ></l-echart>
      </view> -->

      <view class="data-echarts"> &#128514;&#128525;&#128526;&#128527; </view>

      <view class="option" @click="handlePersonalCenter">
        <view class="icon">
          <i class="iconfont icon-s icon-zhengjian"></i>
          <view class="title">个人中心</view>
        </view>
        <view class="arrow"
          ><i
            class="iconfont icon-arrow-right"
            style="font-size: 26rpx; color: #cacaca"
          ></i
        ></view>
      </view>

      <view class="option-container">
        <view
          class="option-row"
          v-for="(item, index) in navOptionList"
          :key="id"
        >
          <button
            class="btn"
            open-type="contact"
            @contact="handleContact"
            v-if="item.title == '联系官方'"
          ></button>
          <button
            class="btn"
            open-type="feedback"
            v-if="item.title == '意见反馈'"
          ></button>
          <view class="icon">
            <i class="iconfont icon-s" :class="item.icon"></i>
            <view class="title">{{ item.title }}</view>
          </view>
          <view class="arrow">
            <i
              class="iconfont icon-arrow-right"
              style="font-size: 26rpx; color: #cacaca"
            ></i>
          </view>
        </view>
      </view>

      <view class="well-known-saying">今天也是自律的一天呦！</view>
    </view>
  </view>

  <Tabbar :page="page"></Tabbar>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import Tabbar from "@/components/Tabbar/index";
import useHomeStore from "@/store/modules/home";
// import LEchart from "@/uni_modules/lime-echart/components/l-echart/l-echart.vue";
// 引入全量包
// import * as echarts from "echarts";

// const chart = ref(null);

// const option = {
//   xAxis: {
//     type: "category",
//     data: [],
//   },
//   yAxis: {
//     type: "value",
//   },
//   series: [
//     {
//       data: [0, 50, 100],
//       type: "line",
//     },
//   ],
// };

// onMounted(() => {
//   console.log("chart：", chart);
//   chart.value.init(echarts, (chart) => {
//     chart.setOption(option);
//   });
// });

// // window.onresize(() => {
// //   // console.log("666")

// // });

// const init = () => {
//   chart.value.init(echarts, (chart) => {
//     chart.setOption(option);
//   });
// };

const page = ref("/pages/index/index");

const homeStore = useHomeStore();
// 格式化导航高度
const navHeight = `${homeStore.navHeight}px`;

// 去登录页面
const handleLogin = () => {
  //在起始页面跳转到login.vue页面并传递参数
  uni.navigateTo({
    url: "/pagesC/login/index",
  });
};

// 导航选项列表
const navOptionList = ref([
  {
    id: 1,
    title: "把One More推荐给好友",
    icon: "icon-saoma",
    page: "",
  },
  {
    id: 2,
    title: "去App Store评分",
    icon: "icon-anquanbangzhu",
    page: "",
  },
  {
    id: 3,
    title: "设置",
    icon: "icon-shujutongji",
    page: "",
  },
  {
    id: 4,
    title: "意见反馈",
    icon: "icon-jiankang",
    page: "",
  },
  {
    id: 5,
    title: "联系官方",
    icon: "icon-kefu",
    page: "",
  },
]);

onMounted(() => {});

// 跳转到个人中心页面
const handlePersonalCenter = () => {
  uni.navigateTo({
    url: "/pagesC/personalCenter/index",
  });
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  width: 750rpx;
  // padding: 0 40rpx;
  background-image: linear-gradient(
    to bottom,
    #82b0ffed,
    #f2f7ff,
    #f2f7ff,
    #f2f7ff,
    #f2f7ff
  );
  padding-top: v-bind(navHeight);

  .content {
    .user {
      display: flex;
      align-items: center;
      padding: 0 40rpx;

      .left {
        border-radius: 100%;
        overflow: hidden;
        width: 160rpx;
        height: 160rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        margin-right: 40rpx;

        image {
          width: 150rpx;
          height: 150rpx;
          border-radius: 100%;
        }
      }

      .right {
        .h1 {
          font-size: 40rpx;
          font-weight: 900;
          color: #000;
          margin-bottom: 8rpx;
        }
        .span {
          color: #7384a5;
          font-size: 26rpx;
        }
      }
    }

    .user-data {
      // width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 50rpx 0;

      .row {
        width: 30%;
        height: 20px;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .top {
          font-size: 38rpx;
          color: #000;
          font-weight: 900;
        }

        .bottom {
          font-size: 26rpx;
          color: #969696;
        }
      }

      .row:nth-child(2) {
        border-left: 1px solid #898f96;
        border-right: 1px solid #898f96;
      }
    }

    // .data-echarts {
    //   height: 200rpx;
    //   background-color: #2d6ef1;
    //   border-radius: 20rpx;
    //   margin: 70rpx 40rpx 30rpx;
    //   box-sizing: border-box;
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;
    // }
    .data-echarts {
      height: 200rpx;
      background-color: #2d6ef1;
      border-radius: 20rpx;
      margin: 70rpx 40rpx 30rpx;
      box-sizing: border-box;
    }

    .option {
      margin: 0 40rpx;
      padding: 0 50rpx;
      height: 85rpx;
      background-color: #fff;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .icon {
        display: flex;
        align-items: center;

        .icon-s {
          margin-right: 20rpx;
          font-size: 38rpx;
        }
      }
    }

    .option-container {
      margin: 20rpx 40rpx;
      // padding: 0 50rpx;
      background-color: #fff;
      border-radius: 20rpx;

      .option-row {
        // margin: 0 40rpx;
        padding: 0 50rpx;
        height: 85rpx;
        background-color: #fff;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn {
          position: absolute;
          height: 70rpx;
          width: 660rpx;
          background-color: transparent;

          &::after {
            border: none;
          }
        }

        .icon {
          display: flex;
          align-items: center;

          .icon-s {
            margin-right: 20rpx;
            font-size: 36rpx;
          }
        }
      }
    }

    .well-known-saying {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #afb2bb;
      margin: 30rpx 0;
    }
  }
}
</style>
